import type { ReactElement } from "react";
import ListSubheader from "@mui/material/ListSubheader";
import { isDark } from "../utilities.mjs";

const DualListPart = (properties: {
  header: string;
  children: ReactElement[];
}) => {
  return (
    <li>
      <ul>
        <ListSubheader
          sx={{
            overflow: "scroll",
            whiteSpace: "nowrap",
            backgroundColor: isDark ? "#333444" : "whitesmoke",
            fontSize: 13,
            lineHeight: "17px",
          }}
        >
          <code>{properties.header}</code>
        </ListSubheader>
        {properties.children}
      </ul>
    </li>
  );
};

export default DualListPart;
